<template>
	<view>
		<!-- <view class="cate cate_seckill">
			<view class="c_tag_list">
				<view class="c_tag" :class="{'c_tag_active':currSeck==1}" @click="changeSeck(1)">
					<view class="c_tag_name">历史秒杀</view>
				</view>
				<view class="c_tag" :class="{'c_tag_active':currSeck==2}" @click="changeSeck(2)">
					<view class="c_tag_name">正在秒杀</view>
				</view>
				<view class="c_tag" :class="{'c_tag_active':currSeck==3}" @click="changeSeck(3)">
					<view class="c_tag_name">秒杀预告</view>
				</view>
			</view>
		</view> -->
		<view class="seck_list">
			<view class="seck_item" v-for="item in flashSaleList" @click="currSeck==3 ? '' : $navTo('/pages/product/product?id='+item.id)">
				<view class="seck_logo"><image :src="item.thumb"></image></view>
				<view class="seck_info">
					<view class="flex_box seck_tit">
						<image src="https://img.jinghushi.com/images/9/2024/12/K7jO6wmzll6V4Bn6ozBfwqWmFf4B4b.png" mode="widthFix"></image>
						<view class="clamp2">{{item.title}}</view>
					</view>
					<view class="flex_between seck_bt">
						<view class="flex_between">
							<view class="seck_bt_tit">最高补贴</view><view class="seck_bt_num">{{Number(item.btrate)}}%</view>
						</view>
						<view class="seck_time flex_between">
							<image src="https://img.jinghushi.com/images/9/2024/12/qPX9T9mEewbUgzzEpUYghExEXDe0mb.png"></image>
							<view class="seack_day" v-if="currSeck==3">距开始</view><view class="seack_day" v-else>距结束</view>
							<view class="seack_num">{{hour(item.times)}}</view>
							<view class="seack_day">小时</view>
						</view>
					</view>
					<view class="flex_between seck_price">
						<view class="flex_align_center">
							<view class="seck_new">
								<text class="pub_small">￥</text>{{item.agentprice}}
								<text v-if="item.hasoption==1" class="pub_small">起</text>
							</view>
							<view class="pub_old">￥{{item.productprice}}</view>
						</view>
						<view class="seck_qiang flex_align_center">
							<view v-if="currSeck==3">即将开售</view>
							<view v-if="currSeck!=3&&item.total!=0">立即抢购</view>
							<view v-if="currSeck!=3&&item.total==0">已抢光</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flashSaleList: [],
				currSeck: 2,
			};
		},
		onLoad(){
			this.getList();
		},
		methods: {
			getList(){
				this.$axios('home/getCurSkill', 'POST', 'shop',{
					type: this.currSeck
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.flashSaleList = res.data.data.goodsList0;
					}
				})
			},
			changeSeck(id){
				if(this.currSeck==id) return;
				this.currSeck = id;
				this.flashSaleList = [];
				this.getList();
			},
			hour(v) {
				return Math.trunc(v / 60 / 60 % 24);
			},
			day(v) {
				return Math.trunc(v / 60 / 60 / 24);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8fe;
		padding-bottom: 40rpx;
	}
	.cate_seckill{
		background: #fff;
		box-shadow: 0rpx 7.5rpx 30rpx  rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		height: 96rpx;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		.c_tag_list{
			display: flex;
			justify-content: space-around;
			line-height: 96rpx;
			.c_tag{
				color: #fff;
				margin-right: 0;
				width: 33%;
				justify-content: center;
				display: flex;
				color: #adadad;
				align-items: center;
				position: relative;
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}
			.c_tag_active{
				font-weight: bold;
				color: #333;
				&::after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 14rpx;
					transform: translateX(-50%);
					width: 50rpx;
					height: 6rpx;
					background: #FF2F24;
					border-radius: 6rpx;
					opacity: .8;
				}
			}
		}
	}
.seck_list{
	padding: 20rpx 10rpx;
	// margin-top: 96rpx;
	.seck_item{
		display: flex;
		background: #fff;
		padding: 10rpx;
		margin-bottom: 16rpx;
		border-radius: 14rpx;
		.seck_logo{
			width: 236rpx;
			height: 236rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
		.seck_info{
			width: calc(100% - 220rpx);
			padding-left: 20rpx;
			.seck_tit{
				image{
					width: 28rpx;
					margin-top: 4rpx;
				}
				.clamp2{
					width: calc(100% - 28rpx);
					padding-left: 4rpx;
				}
			}
			.seck_bt{
				font-size: 22rpx;
				// color: #FFFFFF;
				// width: 180rpx;
				line-height: 38rpx;
				border-radius: 8rpx;
				margin: 24rpx 0;
				// justify-content: flex-start;
				overflow: hidden;
				.seck_bt_tit{
					text-align: center;
					background: #f0e1ff;
					width: 110rpx;
					white-space: nowrap;
					color: #f506a7;
				}
				.seck_bt_num{
					color: #f1cffc;
					padding: 0 6rpx;
					background: #c638f5;
					border-top-right-radius: 8rpx;
					border-bottom-right-radius: 8rpx;
				}
			}
			.seck_price{
				width: 100%;
				height: 60rpx;
				// background: linear-gradient( 90deg, #F0E1FF 0%, #fff 100%);
				background: linear-gradient( to right, #8624d9 0%, #c237f3 100%);
				border-radius: 12rpx;
				padding-left: 10rpx;
				margin-top: 8rpx;
				.seck_new{
					// color: #AF141D;
					color: #fff;
					// font-weight: bold;
					font-size: 36rpx;
					margin-right: 10rpx;
				}
				.pub_old{
					color: #dcb3f5;
					padding-top: 8rpx;
				}
				.seck_qiang{
					color: #fb66bc;
					font-weight: bold;
					background: #f0e1ff;
					border-radius: 0 10rpx 10rpx 16rpx;
					padding: 0 24rpx;
					height: 100%;
					// image{
					// 	width: 48rpx;
					// 	height: 48rpx;
					// }
				}
			}
			.seck_time{
				// color: #A222E9;
				font-size: 24rpx;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
				.seck_btn{
					width: 130rpx;
					line-height: 50rpx;
					background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
					border-radius: 26rpx;
					color: #FFFFFF;
					justify-content: center;
					font-size: 24rpx;
				}
				.seack_day{
					color: #e26cfb;
				}
				.seack_num{
					color: #822fd6;
					font-weight: bold;
					font-size: 32rpx;
					margin: 0 6rpx;
					margin-top: -4rpx;
				}
			}
		}
	}
}
</style>
